<template>
    <div class="my-switch flex-between-center">
        <span :class="[internalValue ? 'label-active-color' : 'label-color']">{{ label }}</span>
        <el-switch v-model="internalValue" :active-color="activeColor" :inactive-color="inactiveColor" style="zoom: .7"></el-switch>
    </div>
</template>
  
<script>
export default {
    props: {
        label: String, // 动态传递的label值
        value: Boolean, // 绑定的value值
        activeColor: { type: String, default: '#0095ff' }, // 可选prop，用于配置active颜色
        inactiveColor: { type: String, default: '#ccc' }, // 可选prop，用于配置inactive颜色
    },
    data() {
        return {
            internalValue: this.value,
        };
    },
};
</script>
<style scoped>
.label-active-color{
    color: #0e92de;
}
.label-color{
    color: #ccc;
}
</style>